<!DOCTYPE html>
<html manifest="./manifest.manifest">
  <head>
    <meta charset="utf-8">
     <meta name="viewport"
      content="width=device-width,
      initial-scale=1.0, maximumscale=1.0, user-scalable=0">
   <title>apple</title>
   <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="../js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
   <link rel="stylesheet" href="../css/bootstrap.min.css">
   <script type="text/javascript" src="../js/apple.min.js"> </script>
    <script src="../js/jquery-cookie.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/apple.min.css">
  </head>
  <body>
     <!-- 导航 -->
     <nav class="navbar nav-fixed-top navbar-default  navbar-fixed-top navbar-nav " style=" background:rgba(0,0,0,.8)" id="tit">
       <div class="container ">
           <div class="navbar-header  ">
            <div class="" id="button-a">
              <a href="#" class=""  style=""><img src="../images/apple.PNG" alt=""></a>
            </div>
            <div class="" id="den">
              <a href="javascript:void(0);" class="den"><img src="../images/k.PNG" alt="">
                <ul class="den-ul" >
                  <li><a href="#" style="color:#000">袋子</a></li>
                  <li><a href="#" style="color:#000">最爱</a></li>
                  <li><a href="#" style="color:#000">命令</a></li>
                  <li><a href="#" style="color:#000">设置</a></li>
                  <li><a href="" class="btn btn-primary btn-mymodal btn-d" data-toggle="modal" data-target="#mymodal-data"  style="color:#000">登录</a></li>
                </ul></a>

            </div>
           <button aria-controls="navbar" class="navbar-toggle collapsed nav-btn" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#navbar">

              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>

         </div>

         <div class="navbar-collapse collapse  container" id="navbar" aria-expanded="false">
           <!-- <a href="#" class="col-lg-1 col-md-1 col-lg-1 col-md-1 col-lg-1 col-md-1 col-sm-5 col-xs-5 "><img src="../images/apple.PNG" alt=""></a> -->
           <ul class="nav-ul nav col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <li class="ccol-lg-1 col-md-1 col-sm-1 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
             <a href="#" ><img src="../images/apple.PNG" alt=""></a>
             </li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">Mac</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">iPad</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">iPatch</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">Watch</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">Tv</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">Music</a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 "><a href="#">Support</a></li>
              <li class="col-lg-1 col-md-1  col-sm-1 "><a href="#"><img src="../images/f.png" alt=""></a></li>
              <li class="col-lg-1 col-md-1 col-sm-1 " id="denglu"><a href="javascript:void(0);"><img src="../images/k.PNG" alt=""></a>
                <ul class="deng-ul" >
                  <li><a href="#" style="color:#000">袋子</a></li>
                  <li><a href="#" style="color:#000">最爱</a></li>
                  <li><a href="#" style="color:#000">命令</a></li>
                  <li><a href="#" style="color:#000">设置</a></li>
                  <li><a href="" class="btn btn-primary btn-mymodal btn-d" data-toggle="modal" data-target="#mymodal-data"  style="color:#000">登录</a></li>
                </ul></li>
           </ul>
         </div>
    </nav>
        <!-- 模态弹出窗内容 -->
    <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">请登录...</h4>
       </div>
       <div class="modal-body">
        <form class="form-group" action="">
          <div class="form-group">
            <label for="">用户名</label>
            <input class="form-control" type="text" placeholder="" id="user">
          </div>
          <div class="form-group">
            <label for="">密码</label>
            <input class="form-control" type="password" placeholder="" id="pass">
          </div>
          <div class="text-right">
            <button class="btn btn-primary" id="moDeng" type="submit">登录</button>
            <button class="btn btn-danger" data-dismiss="modal">取消</button>
          </div>
          <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
          </form>
       </div>
      </div>
     </div>
    </div>


     <!-- 主体 -->
    <main >
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background:#f9f0eb">
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-4 col-lg-offset-3 col-md-offset-3 col-sm-offset-3 col-xs-offset-4 div1">
            <img src="../images/01.png" alt="" style="width:100%;height:100%;">
         </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 divTag" style="background:#fafafa">
         <div class="col-lg-8 col-md-8 col-sm-8 col-xs-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-4 div1">
            <img src="../images/02.png" alt="" style="width:100%;height:100%;">
         </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 divTag" style="background:#fafafa">
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-4 div1">
               <img src="../images/03.png" alt="" style="width:100%;height:100%;">
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 divTag">
          <div class="div-img">
            <div class="div4">
               <img src="../images/16.png" alt="" style="width:100%;height:100%;">
            </div>
          </div>
          <div class="div-img ">
            <div class="div5">
               <img src="../images/17.png" alt="" style="width:100%;height:100%;">
            </div>
          </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 divTag">
          <div class="div-img">
            <div class="div6">
            <img src="../images/18.png" alt="" style="width:100%;height:100%;">
            </div>
          </div>
          <div class="div-img">
            <div class="div7">
              <img src="../images/19.png" alt="" style="width:100%;height:100%;">
            </div>
          </div>
        </div>
     </main>


     <!-- 页脚 -->
     <footer class="col-lg-12 col-md-12 col-sm-12 col-xs-12 foot-nav navbar nav-fixed-top navbar-defaul">
         <div class="footNav">
           <div class="navbar-header footBtn">
              <span class="footP">选购及了解</span>
              <button aria-controls="foot-div1" class="navbar-toggle collapsed" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#foot-div1">

                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>

             </button>
           </div>
             <div class="col-lg-2 col-md-2    foot-div navbar-collapse collapse" id="foot-div1" aria-expanded="false">
               <ul >
                 <p class="">选购及了解</p>
                 <li><a href="#">Mac</a></li>
                 <li><a href="#">iPad</a></li>
                 <li><a href="#">iPhone</a></li>
                 <li><a href="#">Watch</a></li>
                 <li><a href="#">Music</a></li>
                 <li><a href="#">iTunes</a></li>
                 <li><a href="#">iPod touch</a></li>
                 <li><a href="#">配件</a></li>
                 <li><a href="#">App Store充值卡</a></li>
               </ul>
             </div>
         </div>

         <div class="footNav">
           <div class="navbar-header footBtn">
              <span class="footP">选购及了解</span>
              <button aria-controls="foot-div2" class="navbar-toggle collapsed" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#foot-div2">

                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>

             </button>
           </div>
             <div class="col-lg-2 col-md-2  col-lg-offset-2 col-md-offset-2  foot-div navbar-collapse collapse" id="foot-div2" aria-expanded="false">
               <ul >
                 <p class="">选购及了解</p>
                 <li><a href="#">Mac</a></li>
                 <li><a href="#">iPad</a></li>
                 <li><a href="#">iPhone</a></li>
                 <li><a href="#">Watch</a></li>
                 <li><a href="#">Music</a></li>
                 <li><a href="#">iTunes</a></li>
                 <li><a href="#">iPod touch</a></li>
                 <li><a href="#">配件</a></li>
                 <li><a href="#">App Store充值卡</a></li>
               </ul>
             </div>
         </div>

         <div class="footNav">
           <div class="navbar-header footBtn">
              <span class="footP">选购及了解</span>
              <button aria-controls="foot-div3" class="navbar-toggle collapsed" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#foot-div3">

                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>

             </button>
           </div>
             <div class="col-lg-2 col-md-2  col-lg-offset-2 col-md-offset-2  foot-div navbar-collapse collapse" id="foot-div3" aria-expanded="false">
               <ul >
                 <p class="">选购及了解</p>
                 <li><a href="#">Mac</a></li>
                 <li><a href="#">iPad</a></li>
                 <li><a href="#">iPhone</a></li>
                 <li><a href="#">Watch</a></li>
                 <li><a href="#">Music</a></li>
                 <li><a href="#">iTunes</a></li>
                 <li><a href="#">iPod touch</a></li>
                 <li><a href="#">配件</a></li>
                 <li><a href="#">App Store充值卡</a></li>
               </ul>
             </div>
         </div>

         <div class="footNav">
           <div class="navbar-header footBtn">
              <span class="footP">选购及了解</span>
              <button aria-controls="foot-div4" class="navbar-toggle collapsed" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#foot-div4">

                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>

             </button>
           </div>
             <div class="col-lg-2 col-md-2  col-lg-offset-2 col-md-offset-2  foot-div navbar-collapse collapse" id="foot-div4" aria-expanded="false">
               <ul >
                 <p class="">选购及了解</p>
                 <li><a href="#">Mac</a></li>
                 <li><a href="#">iPad</a></li>
                 <li><a href="#">iPhone</a></li>
                 <li><a href="#">Watch</a></li>
                 <li><a href="#">Music</a></li>
                 <li><a href="#">iTunes</a></li>
                 <li><a href="#">iPod touch</a></li>
                 <li><a href="#">配件</a></li>
                 <li><a href="#">App Store充值卡</a></li>
               </ul>
             </div>
         </div>
     </footer>
  </body>
</html>
